<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>codepen</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <script src="./icon/iconfont.js"></script>
</head>
<body>
    <div class="left color float">
        <h1 style="font-size: 25px; padding: 14px 16px;">CODEPEN</h1>
        <h6 class="margin padding">CREATE</h6>
        <div class="left-1 color margin padding" style="border-top:4px solid yellow;">
            <ul>
                <li class="list-style"><span class="iconfind icon-caidanzhankai"></span><a href="#" class="color text-decoration">Pen</a></li>
                <li class="list-style"><span class="iconfind icon-caidanshouqi"></span><a href="#" class="color text-decoration">Project</a></li>
                <li class="list-style"><span class="iconfind icon-jiangji"></span><a href="#" class="color text-decoration">Collection</a></li>
            </ul>
        </div>
        <div class="left-2 color margin padding" style="border-top: 4px solid red; ">
            <ul>
                <li class="list-style"><a href="#" class="color text-decoration">Your Work</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Activity</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Assets</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Pinned Items</a></li>
            </ul>
        </div>
        <div class="left-3 color margin padding" style="border-top: 4px solid skyblue;">
            <ul>
                <li class="list-style"><a href="#" class="color text-decoration">Following</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Trending</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Challenges</a></li>
                <li class="list-style"><a href="#" class="color text-decoration">Spark</a></li>
            </ul>
        </div>
        <div class="left-4 color margin padding" style="border-top: 4px solid rgb(13, 196, 186);">
            <span><a href="#" class="color text-decoration">CodePen</a><span style="background: rgb(179, 238, 18);color: black;">PRO</span></span>
        </div>
        <div class="left-5 margin padding">
            <a href="#"><img src="https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png" alt="" style="width: 130px; height: 100px;"></a>
            <a href="#" class="color text-decoration" style="font-size: 10px;">Limited time offer: Get 10 free Adobe Stock images.</a>
            <a href="#" class="color text-decoration" style="font-size: 10px;">ads via Carbon</a>
        </div>
    </div>
    <div class="right col-10">
        <div>12343242342</div>
        <div class="right-top flex">
            <div class="right-top-left col-6">
                <span class="color">THE</span>
                <h1 class="color" style="display: inline-block;">CODEPEN</h1>
                <h1 style="font-size: 120px; color: yellowgreen;">SPARK</h1>
                <p style="font-size: 25px; color: yellowgreen;">ALL the can't-miss links.</p>
            </div>
            <div class="right-top-right col-4 flex">
                <div class="col-3 background">
                    <div><span class="iconfont icon-fenxiang icon-style" style="font-size: 150px; color: blueviolet;"></span></div>
                    <div><p class="color">Delivered straight to your email each week. You're subscribed!</p></div>
                </div>
                <div class="col-3 background">
                    <div><span class="iconfont icon-WiFi icon-style" style="font-size: 100px; color: green;"></span></div>
                    <div><p class="color">Add the feed to your favorite RSS reader and never miss a thing.</p></div>
                </div>
                <div class="col-3 background">
                    <div><span class="iconfont icon-wujiaoxing-" style="font-size: 100px; color: yellow;"></span></div>
                    <div><p class="color">Sponsor a week and reach a large audience of designers and developers.</p></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>